<template>
  <div style="padding-bottom: 50px">
    <div class="course-comment mt_20" v-if="pjList.length > 0">
      <div class="course-comment-top">
        <div class="score">{{ pjInfo.gradeAvg }}</div>
        <div class="score-desc">
          <p>好评{{ pjInfo.goodsEvRate }}%</p>
          <Rate allow-half disabled :value="Number(pjInfo.gradeAvg)" />
        </div>
        <div class="comment-total">
          <div>
            <Tag color="default">全部{{ pjInfo.evTotalCount }}</Tag>
            <Progress :percent="100" :stroke-color="['#FF6E56', '#FAD126']" />
          </div>
          <div>
            <Tag color="default">好评{{ pjInfo.goodsEvCount }}</Tag>
            <Progress
              :percent="pjInfo.goodsEvRate"
              :stroke-color="['#FF6E56', '#FAD126']"
            />
          </div>
          <div>
            <Tag color="default">中评{{ pjInfo.midEvCount }}</Tag>
            <Progress
              :percent="pjInfo.midEvRate"
              :stroke-color="['#FF6E56', '#FAD126']"
            />
          </div>
          <div>
            <Tag color="default">差评{{ pjInfo.badEvCount }}</Tag>
            <Progress
              :percent="pjInfo.badEvRate"
              :stroke-color="['#FF6E56', '#FAD126']"
            />
          </div>
        </div>
      </div>
      <!-- 评论区 -->
      <List item-layout="vertical" class="parent-box">
        <ListItem v-for="(item, index) in pjList" :key="index">
          <ListItemMeta
            :avatar="item.evaluaterFace"
            :title="item.userName"
            :description="item.userEvaluateTime"
          />
          {{ item.content }}
          <template slot="extra">
            <div class="list-item">
              <div class="list-c">
                <div class="text">
                  <p>
                    <span
                      style="font-size: 14px; vertical-align: sub; font-weight: bold; padding-right: 5px"
                      >{{ item.grade.toFixed(1) }}</span
                    ><Rate allow-half disabled :value="item.grade" />
                  </p>
                  <AText>{{ item.userEvaluate }}</AText>
                </div>
                <div class="btn-box">
                  <span
                    ><Icon type="ios-text-outline" size="18" />{{ item.childCount }}</span
                  ><span
                    ><Icon type="ios-thumbs-up-outline" size="18" />{{ item.likes }}</span
                  >
                </div>
              </div>
              <div class="child-box" v-if="item.child.length > 0">
                <!-- 前三条子评论 -->
                <List
                  item-layout="vertical"
                  class="child-list"
                  v-for="info in item.child.slice(0, 3)"
                  :key="info.id"
                >
                  <ListItem>
                    <ListItemMeta
                      :avatar="info.evaluaterFace"
                      :title="info.userName"
                      :description="info.userEvaluateTime"
                    />
                    {{ info.content }}
                    <template slot="extra">
                      <div class="child-list-c">
                        <div class="child-text">
                          <p>回复 {{ info.replyToName }}：</p>
                          <AText>{{ info.userEvaluate }}</AText>
                        </div>
                        <div class="btn-box">
                          <span
                            ><Icon type="ios-thumbs-up-outline" size="18" />{{
                              info.likes
                            }}</span
                          >
                        </div>
                      </div>
                    </template>
                  </ListItem>
                </List>
                <!-- 展示更多的子评论 -->
                <List
                  item-layout="vertical"
                  class="child-list"
                  v-for="info in item.child.slice(3, item.child.length)"
                  :key="info.id"
                  v-show="!item.childMore"
                >
                  <ListItem>
                    <ListItemMeta
                      :avatar="info.evaluaterFace"
                      :title="info.userName"
                      :description="info.userEvaluateTime"
                    />
                    {{ info.content }}
                    <template slot="extra">
                      <div class="child-list-c">
                        <div class="child-text">
                          <p>回复 {{ info.replyToName }}：</p>
                          <AText>{{ info.userEvaluate }}</AText>
                        </div>
                        <div class="btn-box">
                          <span>
                            <Icon type="ios-thumbs-up-outline" size="18" />{{
                              info.likes
                            }}</span
                          >
                        </div>
                      </div>
                    </template>
                  </ListItem>
                </List>
                <div
                  class="search-all"
                  @click="goMore(index)"
                  v-if="item.child.length > 3 && item.childMore"
                >
                  <span>查看全部回复</span>
                </div>
              </div>
            </div>
          </template>
        </ListItem>
        <div class="search-all" v-if="!lastPage" @click="addList">
          <span>查看更多回复</span>
        </div>
      </List>
    </div>
    <div style="width: 100%; text-align: center; flex: 24px; padding-top: 100px" v-else>
      暂无评论
    </div>
  </div>
</template>

<script>
import * as API_Approval from "@/api/special.js";
import AText from "@/components/preview/aText.vue"

export default {
  name: "CourseComment",
  components: { AText },
  props: {
    id: {
      type: String,
      required: "",
    },
  },
  data() {
    return {
      page: {
        page: 1,
        rows: 5,
        courseSeriesId: "",
      },
      pjInfo: {},
      pjList: [],
      lastPage: false,
      childMore: false,
    };
  },
  mounted() {
    this.getPjPageList();
    this.getPjData();
  },
  methods: {
    //评论基本详情
    getPjData() {
      API_Approval.getCourseInfo(this.id).then((res) => {
        if (res.code == 200) {
          this.pjInfo = res.result;
          this.pjInfo.goodsEvRate = Number((res.result.goodsEvRate * 100).toFixed(0));
          this.pjInfo.midEvRate = Number((res.result.midEvRate * 100).toFixed(0));
          this.pjInfo.badEvRate = Number((res.result.badEvRate * 100).toFixed(0));
        }
      });
    },
    //获取评论分页
    getPjPageList() {
      this.page.courseSeriesId = this.id;
      API_Approval.getCourseContPage(this.page).then((res) => {
        if (res.code == 200) {
          let data = res.result.records;
          data.forEach((item) => {
            if (item.child.length > 3) {
              item.childMore = true;
            } else {
              item.childMore = false;
            }
          });
          this.pjList = data;
          this.pjListObj = res.result;
          //判定最后一条
          if (this.pjListObj.current == this.pjListObj.pages) {
            this.lastPage = true;
          }
        }
      });
    },
    //更多子评论
    goMore(index) {
      this.pjList[index].childMore = false;
    },
    //更多评论
    addList() {
      if (this.pjListObj.current != this.pjListObj.pages) {
        this.page.rows = this.page.rows + 5;
        this.getPjPageList();
        this.lastPage = false;
      } else {
        this.lastPage = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// 课程评论
.course-comment {
  width: 100%;
  min-height: 29.6875rem;
  padding: 0 3.375rem 0.9375rem;
  background: #ffffff;
  .course-comment-top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 9.375rem;
    margin-bottom: 1.25rem;
    .score {
      font-size: 3.75rem;
      font-weight: bold;
      color: #181818;
      line-height: 3.25rem;
      margin-right: 0.3125rem;
    }
    .score-desc {
      margin-right: 2.875rem;
    }
    // 评论统计
    .comment-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      flex: 1;
      > div {
        display: flex;
        align-items: center;
        width: 50%;
        // 标签样式
        .ivu-tag {
          width: 5rem;
          height: 1.625rem;
          background: #f0f0f0;
          border-radius: 0.25rem;
          box-sizing: content-box;
          line-height: 1.75rem;
          text-align: center;
          margin-right: 0.625rem;
        }
      }
    }
  }
}
// 评论列表

::v-deep .ivu-list-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 3.5rem;
  background: #f9f9f9;
  border: none;
  margin-bottom: 0.9375rem;
  border-radius: 0.25rem;
  box-sizing: border-box;
  .ivu-list-item-main {
    display: flex;
    align-items: center;
    flex: auto;
    .ivu-list-item-meta {
      margin-bottom: 0;
      .ivu-avatar {
        width: 3.75rem;
        height: 3.75rem;
      }
      .ivu-list-item-meta-title {
        font-size: 1rem;
        font-family: "Source Han Sans SC";
        font-weight: 400;
        color: #070a0c;
        line-height: 1.5rem;
      }
      .ivu-list-item-meta-description {
        font-size: 0.75rem;
        font-family: "Source Han Sans SC";
        font-weight: 400;
        color: #cbcbcb;
        line-height: 1.5rem;
      }
    }
  }
  textarea.ivu-input {
    background: #f9f9f9;
  }
  .ivu-list-item-extra {
    flex: 100;
    display: flex;
    .list-item {
      width: 100%;
    }
  }
}
.list-c {
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.btn-box {
  display: inline-flex;
  align-items: flex-end;
  span {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    .ivu-icon {
      margin-right: 3px;
    }
  }
}
.search-all {
  color: #176eff;
  display: flex;
  justify-content: center;
  margin-top: 0.8125rem;
  > span {
    cursor: pointer;
  }
}
.parent-box {
  .ivu-list-item {
    align-items: baseline;
    padding: 10px 10px 10px 50px;
  }
}
.child-box {
  border-radius: 10px;
  margin: 10px 0;
  .child-list {
    .child-list-c {
      display: flex;
      flex: 1;
      .child-text {
        flex: 1;
      }
    }
    .ivu-list-item {
      padding: 10px 20px;
      background: #fff;
      border-bottom: 1px solid #e3e3e3;
      align-items: center;
      margin-bottom: 0;
    }
    &:last-of-type {
      border: none;
    }
  }
}
</style>
